<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      
        <van-field
          v-model="value1"
          placeholder="请输入手机号"
        >
        <template #left-icon>
            <i class="iconfont">&#xe60b;</i>
        </template>
        </van-field>
        <van-field
          v-model="code"
          placeholder="请输入短信验证码"
        >
          <template #left-icon>
            <i class="iconfont">&#xe744;</i>
          </template>
          <template #button>
            <van-text size="small" type="primary">发送验证码</van-text>
          </template>
        </van-field>
    </div>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"
    />
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>

    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            value1: '',
            code:'',
          }
        }
      })
    </script>
  </body>
</html>
